<template>
<!-- 详情页 -->
    <div>
        <!-- 头部组件 -->
        <topitem @loginmethod="loginmethod" :loginstate="loginstate" :buts="buts"></topitem>
        <!-- 主体 -->
        <div class="detailsboss">
            <!-- 头部模糊图片 -->
            <div class="details-top">
                <img :src="bigimg" alt="">
                <div class="mbblack"></div>
                <div class="mb"></div>
                <div class="details-title">
                    <div class="title-name">
                        <h1>{{boxtitle}}</h1>
                        <p>
                            <span>自制</span>
                            <a href="">穿越</a>
                            <a href="">玄幻</a>
                            <a href="">热血</a>
                        </p>
                    </div>
                    <div class="title-but">
                        <button v-show="but" @click="modifybut"><i class="ift-cat"></i>开始阅读</button> 
                        <button v-show="!but"><i class="ift-cat"></i>继续阅读</button>
                        <button v-show="!buts" class="collect" @click="modifybuts"><i class="ift-cat"></i><em class="ift-aixin-line"></em>收藏</button>
                        <button v-show="buts" class="collect"><i class="ift-cat"></i><em class="ift-aixin"></em>已收藏</button>
                    </div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="details-content container clearfix">
                <!-- 左边内容 -->
                <div class="content-left">
                    <!-- 目录 -->
                    <div class="con-list">
                        <h2>目录</h2>
                        <p>2022-05-29&nbsp;&nbsp;&nbsp;&nbsp;更新至 <span>最终话 新的征程</span></p>
                        <div class="list-num">
                            <span class="num-span">1-20</span>
                            <div class="ift-diandianx">
                                <div class="if-list">
                                    <i class="triangle"></i>
                                    <ul class="clearfix">
                                        <li>21-40</li> 
                                        <li>41-60</li> 
                                        <li>61-80</li>
                                        <li>81-95</li>
                                    </ul>
                                </div>
                            </div>
                            <em  class="num-em">最新20话</em>
                            <div class="num-text">
                                <span :class="{'con':TextImg==0}" @click="modifyTextImg">文字</span>
                                <i class="split"></i>
                                <span :class="{'con':TextImg==1}" @click="modifytextImg">图文</span>
                            </div>
                        </div>
                    </div>
                    <!-- 云 -->
                    <div class="yun">
                        <img src="../assets/img/cloud-line.png" alt="">
                    </div>
                    <!-- 图片章节导航 或 文字章节导航 -->
                    <div class="bd">
                        <div class="bdtext" v-show="TextImg==0">
                            <ul class="clearfix">
                                <li v-for="(item,index) in contentdata" :key="index">
                                    <p>{{item.title}}</p>
                                </li>
                                
                            </ul>
                        </div>
                        <div class="bdimg" v-show="TextImg==1">
                            <ul class="clearfix">
                                <li v-for="(item,index) in contentdata" :key="index">
                                    <div class="bdimgbox">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <p>{{item.title}}</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 相关推荐 -->
                    <div class="suggest">
                        <h2>相关推荐<span @click="addrenewsuggest"><i class="ift-loop-arrow"></i>换一换</span></h2>
                        <ul class="clearfix">
                            <li v-for="(item,index) in suggestdata.slice(sudnum,sudlength)" :key="index">
                                <div class="suggest-imgbox">
                                    <img :src="item.vertical_image_url" alt="">
                                    <div class="mb"></div>
                                </div>
                                <p>{{item.title}}</p>
                            </li>
                        </ul>
                    </div>
                    <!-- 猜你喜欢 -->
                    <div class="youlike">
                        <h2>猜你喜欢<span @click="addrenewyoulike"><i class="ift-loop-arrow"></i>换一换</span></h2>
                        <ul class="clearfix">
                            <li v-for="(item,index) in youlikedata.slice(likenum,likelength)" :key="index">
                                <div class="youlike-imgbox">
                                    <img :src="item.cover_image_url" alt="">
                                    <div class="mb"></div>
                                </div>
                                <p>{{item.title}}</p>
                            </li>
                        </ul>
                    </div>
                    <!-- 评论 -->
                    <div class="conment">
                        <h2>漫评</h2>
                        <div class="miconment">
                            <h3>评论</h3>
                            <p><span>0</span>条评论</p>
                        </div>
                        <div class="micontext">
                            <textarea name="" id="" cols="30" rows="10" placeholder="有事没事说两句..." maxlength="500"></textarea>
                            <span>0/500</span>
                        </div>
                        <div class="toone">
                             <button><i></i>吐槽一下</button>
                        </div>
                        <p class="sh">评论正在审核中~</p>
                    </div>
                    
                </div>
                <!-- 右边内容 -->
                <div class="content-right">
                    <div class="rig-top">
                        <div class="introduce">
                            <span :class="{'con':role==1}" @mouseenter="addcolor">漫画简介</span>
                            <span class="split"></span>
                            <span :class="{'con':role==0}" @mouseenter="addcolors">作者角色</span>
                        </div>
                        <div class="details">
                            <div class="details-intem clearfix" v-show="role==1">
                                <img src="../assets/img/xqjj01.webp" alt="">
                                <div class="details-over">
                                    <h2>完结</h2>
                                    <p>每周五、六更新</p>
                                    <div>ta很懒，什么也没有留下~</div>
                                </div>
                                <div class="details-content">
                                    <h2>故事简介</h2>
                                    <p>【独家/每周五、六更新】华夏兵王因在一次找寻文物任务中，为抢夺上古神玉，魂穿天荒大陆天心宗，陨落的天才修真少宗主林云天之身，面对曾经的恩怨纠纷、林云天得一缕龙魂相助，修无上功法，天才回归，解决恩怨，踏上成为强者的巅峰之路。</p>
                                </div>
                            </div>
                            <div class="details-chart" v-show="role==0">
                                <el-carousel  type="card" height="245px"  indicator-position="none" :autoplay="false" arrow="never">
                                    <el-carousel-item v-for="(item,index) in imgs" :key="index" @click="inchart(key)" >
                                        <img :src="item.img" alt="" @click="inchart(index)">
                                    </el-carousel-item>
                                </el-carousel>
                                <div class="chart-text">
                                    <h2>{{imgs[indexchart].title}}</h2>
                                    <p>简介</p>
                                    <div>{{imgs[indexchart].content}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 粉丝贡献榜 -->
                    <div class="fans">
                        <h2>粉丝贡献榜</h2>
                        <ul>
                            <li class="fans-con3" v-for="(item,index) in fansdata.slice(0,3)" :key="index">
                                <div class="con-img">
                                    <img :src="item.img" alt="">
                                </div>
                                <div class="con-text">
                                    <div class="text-name">
                                        <span>{{item.name}}</span>
                                        <div class="grade">
                                            <span><i class="ift-dengjix"></i>LV{{item.lv}}</span>
                                        </div>
                                    </div>
                                    <div class="text-num">
                                        <span>贡献值</span>
                                        <span>{{item.devote}}</span>
                                    </div>
                                </div>
                                <i class="con-tp"></i>
                            </li>
                            

                            <li class="fans-con7" v-for="(item,index) in fansdata.slice(4,10)" :key="index">
                                <i>{{index}}</i>
                                <div class="name">
                                    <span>{{item.name}}</span>
                                    <div class="grade">
                                        <span><i class="ift-dengjix"></i>LV{{item.lv}}</span>
                                    </div>
                                </div>
                                <span class="con-num">{{item.devote}}</span>
                            </li>
                            
                            
                        </ul>
                    </div>
                    <!-- 综合榜 -->
                    <div class="zhlist">
                        <div class="list-title">
                            <h2>综合榜</h2>
                            <p>
                                <span class="con">周</span>
                                <span>月</span>
                                <span>总</span>
                            </p>
                        </div>
                        <div class="list-item">
                            <ul >
                                <li  v-for="(item,index) in comprehensivedata" :key="index" @mouseenter="addComprehensive(index+1)" :class="{'con':Comprehensive==index+1}">
                                    <div class="list-text">
                                        <i>{{index+1}}</i>
                                        <h3>{{item.title}}</h3>
                                        <p>
                                            <span>{{item.hot}}</span>
                                            <em class="icon-detail-fire"></em>
                                        </p>
                                    </div>
                                    <div class="list-img">
                                        <div class="if-img">
                                            <img :src="item.img" alt="">
                                            <em>{{index+1}}</em>
                                        </div>
                                        <div class="if-text">
                                            <h3>{{item.title}}</h3>
                                            <p>{{item.introduce}}</p>
                                            <div class="fire">
                                                <span>{{item.hot}}</span>
                                                <i class="icon-detail-fire"></i>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <!-- 看了又看 -->
                    <div class="look">
                        <h2>看了又看<span><i class="ift-loop-arrow"></i>换一换</span></h2>
                        <div class="see-img" v-for="(item,index) in youlikedata.slice(likenum,likelength)" :key="index">
                            <div class="if-img">
                                <img :src="item.cover_image_url" alt="">
                            </div>
                            <p>{{item.title}}</p>
                        </div>
                    </div>
                    
                </div>

            </div>
        </div>
        <!-- 底部组件 -->
        <bigcat></bigcat>

        <!-- 登录组件 -->
        <loginitem v-show="loginstate" @loginmethod="loginmethod"></loginitem>
    </div>
</template>

<script>
import topitem from "../components/TopAssembly.vue" ;
import bigcat from "../components/BottomAssembly.vue" ;
import loginitem from "../components/LoginAssembly.vue" ;
import {getrenewdata} from "../api/renew.js";
import {getreaddata} from "../api/read.js";
import {getcontentdata} from "../api/content.js"
  export default {
    data() {
        return {
            but:true,//阅读状态
            buts:false,//收藏状态
            TextImg:1,//文字图片显示状态
            role:1,//漫画简介 作者角色 显示状态
            Comprehensive:1,// 综合榜显示状态
            loginstate:false,// 登录组件


            imgs:[
                {
                    id:0,
                    img:"http://head.samanlehua.com/kmh_user_head/263/605/854.jpg-100x100.webp",
                    title:"向南社 | 共有 18 部作品",
                    content:"一路向南，面朝阳光，在天与海之间越走越高，向着海风来的方向，向着奇妙王国，邂逅一场奇妙的旅行。代表作品：《无敌学霸系统》、《末世大小姐》、《龙腾战尊》……"
                },
                {
                    id:1,
                    img:"http://head.samanlehua.com/kmh_user_head/258/973/196.jpg-100x100.webp",
                    title:"创星漫艺 | 共有 1 部作品",
                    content:"创星漫艺是是一家专业从事漫画作品IP创作服务的动漫企业。是集编剧、绘制、宣发、版权开发为一体的泛娱乐内容创作公司。 公司拥有成熟的内容生产模式，拥有大量行业领先的漫画创作人才，公司致力于成为国内最顶级的漫画作品IP知识产权服务商和制造商之一。力求通过专业的服务和制作，为中国动漫行业的发展贡献一份力量。 创新，创意是我们的立身之本；漫画艺术是我们的追求；我们立足于精品内容，探索最前沿的技术和创意，致力于扶植业内新鲜血液，鼓励内容创新，在业内合作伙伴中拥有极好口碑。是一支成熟、稳定而富有经验的创作团队。"
                },
                {
                    id:2,
                    img:"http://head.samanlehua.com/kmh_user_head/258/089/599.jpg-100x100.webp",
                    title:"林云天（龙腾战尊）",
                    content:"华国最强特种兵，在一次找寻文物的任务中，为抢夺上古神玉，意外魂穿到异世同名修真少年林云天身上，融合上古神玉，意外被一缕龙魂附体，重塑血脉，天才回归，踏上巅峰之路。"
                },
                {
                    id:3,
                    img:"http://head.samanlehua.com/kmh_user_head/258/089/835.jpg-100x100.webp",
                    title:"雪儿(龙腾战尊）",
                    content:"雪儿高层大陆，上古雪族的圣女，出生时便天生异象，修炼天赋惊人，由于家族被灭门，从小孤苦伶仃，之后又被人拐卖，命运难期，幸而被林云天收留，待其如亲妹妹一般，细心照顾，最终倾心与林云天，亦是林云天心中的白月光。"
                },
            ],// 轮播图临时数据
            indexchart:0,// 轮播图点击事件
            
            renewdata:[],// 总数据
            suggestdata:[],// 相关推荐数据
            sudlength:4,// 相关推荐数据-换一换
            sudnum:0,// 相关推荐数据-换一换
            youlikedata:[],// 猜你喜欢数据
            likelength:4,// 相关推荐数据-换一换
            likenum:0,// 相关推荐数据-换一换

            readdata:[],// 详情页数据(非)
            boxtitle:null,// 详情页漫画标题
            bigimg:null,// 详情页漫画模糊大图片
            readid:null,// 接收路由传过来的id
            contentdata:[],// 章节列表数据
            fansdata:[],// 粉丝数据
            comprehensivedata:[],//  综合数据
        };
    },
    created(){ 
        window.scrollTo(0,0);
        // 获取路由传参
        if("id" in this.$route.query){
                let {id} =this.$route.query;
                this.readid = id;
        }
        this.getrenewdatamethod();
        this.getreaddatamethod();
        this.getcontentdatamethod()

        let Collectionstate = JSON.parse(window.localStorage.getItem("Collection"))// 获取收藏内容
        if(Collectionstate){
           let x = Collectionstate.findIndex(item=>{
                return item.obj.id == this.readid
            }) 
            console.log(x);
            console.log(this.readid);
            console.log(Collectionstate);
            this.buts = Collectionstate[x].state
        }
        
       
    },
    methods:{
        // 点击切换 阅读与收藏状态
        modifybut(){
            this.but = !this.but;
            let id = this.readid
            this.$router.push({path:"/read",query:{ id }})
        },
        // 收藏 
        modifybuts(){
            
            let login = window.localStorage.getItem("username"); // 判断是否登录
            if(login){
                this.buts = !this.buts;
                let Collectionstate = this.buts;// 记录收藏状态
                let arr = JSON.parse(window.localStorage.getItem("Collection"));
                let x = this.readdata.findIndex(item=>{
                    return item.id == this.readid
                })
                if(arr){
                    let collkey = {
                        state:Collectionstate,
                        obj:this.readdata[x] 
                    } ;
                    arr.push(collkey)
                    window.localStorage.setItem("Collection",JSON.stringify(arr)) // 收藏状态
                }else{
                    let logarr = [];
                    let collkeys = {
                        state:Collectionstate,
                        obj:this.readdata[x] 
                    };
                    logarr.push(collkeys)
                    window.localStorage.setItem("Collection",JSON.stringify(logarr)) // 收藏状态
                }
                
            } else{
                window.alert("请登录后再进行操作。")
            } 
            
        },
        // 切换文字图片
        modifyTextImg(){
            this.TextImg = 0 ;
        },  
        modifytextImg(){
            this.TextImg = 1 ;
        },
        // 漫画简介 作者角色 切换事件
        addcolor(){
            this.role = 1;
        },
        addcolors(){    
            this.role = 0;
        },
        // 轮播图点击事件
        inchart(index){
            this.indexchart = index;
            // console.log(index);
        },
        // 综合榜
        addComprehensive(index){
            this.Comprehensive = index;
        },
        // 登录组件
        loginmethod(){
            this.loginstate = !this.loginstate;
        },
        // 数据
        getrenewdatamethod(){
             getrenewdata().then(data =>{
                this.renewdata = data.data;  // 总数据
                this.suggestdata = data.data.ugc_topics;//相关推荐数据
                this.youlikedata = data.data.popularity_topics

                // console.log(this.renewdata);
             })
        },
        getreaddatamethod(){
            getreaddata().then(data =>{
                this.readdata = data.data;// 获取数据
                let readindex =  this.readdata.findIndex(item=>{
                    return item.id == this.readid
                })// 匹配id相同的下标
                // console.log(this.readid);
                // console.log(readindex);
                this.bigimg = this.readdata[readindex].imgs;// 详情页漫画标题
                this.boxtitle = this.readdata[readindex].title;// 详情页漫画模糊大图片
            
            })
        },
        // 相关推荐数-换一换
        addrenewsuggest(){
            if(this.sudnum<8){
                this.sudnum =this.sudlength;
                this.sudlength = this.sudlength + 4; 
            }else{
                this.sudnum = 0 ;
                this.sudlength = 4;
            }
        },
        addrenewyoulike(){
            if(this.likenum<8){
                this.likenum =this.likelength;
                this.likelength = this.likelength + 4; 
            }else{
                this.likenum = 0 ;
                this.likelength = 4;
            }
        },
        getcontentdatamethod(){
            getcontentdata().then(data=>{
                this.contentdata = data.data;
                this.fansdata = data.fans;
                this.comprehensivedata = data.comprehensive;
            })
        }

    },
    components:{
      topitem,
      bigcat,
      loginitem
    }
  }
</script>

<style lang="scss" scoped>

// 头部模糊图片
.detailsboss{
    width: 100%;
    margin: 64px auto 0px;
}
.detailsboss .details-top{
    width: 100%;
    height: 370px;
    margin-bottom:15px ;
    overflow: hidden;
    position: relative;
}
.detailsboss .details-top img{
    width: 100%;
    margin-top:-15% ;
    filter: blur(20px);
}
.detailsboss .details-top .mbblack{
    position: absolute;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 370px;
    background-color: rgba($color: #000, $alpha: 0.3);
}
.detailsboss .details-top .mb{
    position: absolute;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 119px;
   background: url(../assets/img/xqmb.png) 0px 25px no-repeat;
   background-size: 100% auto;
}
.detailsboss .details-top .details-title{
   width: 100%;
//    position: relative;
}
.detailsboss .details-top .details-title .title-name{
//    width: 207px;
   height: 167px;
   position: absolute;
   left: 10%;
   top: 38%;
   z-index: 20;
}
.title-name h1{
//    width: 100%;
   height: 52px;
   margin: 26px 0px;
   font-size: 40px;
   color: #fff;
}
.title-name p{
   width: 100%;
   height: 32px;
   font-size: 14px;
   color: #fff;
}
.title-name span{
    display: inline-block;
   width: 48px;
   height: 26px;
   font-size: 14px;
   color: #fff;
   padding-top: 6px;
   background: url(../assets/img/a-jlt.png) -104px -134px no-repeat;
   text-align: center;
   line-height: 26px;
}
.title-name a{
    display: inline-block;
    width: 28px;
    height: 16px;
    font-size: 14px;
    color: #fff;
    padding: 5px 10px;
    background-color: rgba(0,0,0,0.50);
    text-align: center;
    line-height: 16px;
    border-radius: 13px;
    margin-left:5px ;
}
.title-name a:hover{
    background-color: #fc6976;
}
.title-but{
    width: 336px;
    height: 45px;
    position: absolute;
    right: 10%;
    top: 65%;
    z-index: 20;
}
.title-but button{
    width: 140px;
    height: 43px;
    line-height: 32px;
    color: #fff;
    font-size: 20px;
    border-radius: 22px;
    border: 0;
    margin-left:24px ;
    background-image: linear-gradient(0deg,#fc6976,#FC4F71 42%,#FFB5C3);
    box-shadow: 0 0 0 0 #FC4F71;
    position: relative;
}
.title-but button:hover{
    width: 140px;
    height: 43px;
    line-height: 32px;
    color: #fff;
    font-size: 20px;
    border-radius: 22px;
    border: 0;
    margin-left:24px ;
    background-image: linear-gradient(0deg,#fc6976,#FC4F71 42%,#FFB5C3);
    box-shadow: 0 0 10px 0 #fc4f71;
    position: relative;
}
.title-but button.collect{
    width: 140px;
    height: 43px;
    line-height: 32px;
    color: #fc6976;
    font-size: 20px;
    border-radius: 22px;
    border: 0;
    margin-left:24px ;
    background-image: linear-gradient(0deg,#fff,#fff);
    position: relative;
}
.title-but button.collect i{
    display: inline-block;
    color: #fff;
    width: 24px;
    height: 24px;
    background-size: 100%;
    position: absolute;
    top: -24px;
    left: 58px;
}
.title-but button.collect:hover{
    width: 140px;
    height: 43px;
    line-height: 32px;
    color: #fff;
    font-size: 20px;
    border-radius: 22px;
    border: 0;
    margin-left:24px ;
    background-image: linear-gradient(0deg,#fc6976,#FC4F71 42%,#FFB5C3);
    position: relative;
}
.title-but button.collect:hover i{
    display: inline-block;
    color: #fc6976;
    width: 24px;
    height: 24px;
    background-size: 100%;
    position: absolute;
    top: -24px;
    left: 58px;
}
.title-but button.collect:hover em{
    color: #fff;
}
.title-but button.collect em{
    color: #fc6976;
}
.title-but button i{
    display: inline-block;
    color: #fc6976;
    width: 24px;
    height: 24px;
    background-size: 100%;
    position: absolute;
    top: -24px;
    left: 58px;
}

// 内容
.details-content .content-left{
    float: left;
    width: 838px;
    padding: 0 8px;
    margin-right:38px;
}
.details-content .content-left .con-list{
    width: 100%;
    height: 38px;
    padding-bottom:10px ;
}
.details-content .content-left .con-list h2{
    display: inline-block;
    width: 48;
    height: 28px;
    color: #333;
    font-size: 24px;
    margin-right:18px ;
    font-weight: 400;
}
.details-content .content-left .con-list p{
    display: inline-block;
    width: 248;
    height: 20px;
    color: #666;
    font-size: 14px;
}
.details-content .content-left .con-list p span{
    color: #fc6976;
}
.details-content .content-left .con-list p span:hover{
    color: #43bef6;
}
.details-content .content-left .con-list .list-num{
    float: right;
    width: 266px;
    height: 25px;
    margin-top:5px ;
}
 .con-list .list-num .num-text{
    float: right;
    width: 65px;
    height: 20px;
}
 .con-list .list-num .num-text span{
    display: inline-block;
    width: 28px;
    height: 20px;
    font-size:14px;
    color: #333;
    cursor: pointer;
}
 .con-list .list-num .num-text span.con{
    display: inline-block;
    width: 28px;
    height: 20px;
    font-size:14px;
    color: #fc6976;
}
 .con-list .list-num .num-text span:hover{
    display: inline-block;
    width: 28px;
    height: 20px;
    font-size:14px;
    color: #fc6976;
}
 .con-list .list-num .num-text i{
    display: inline-block;
    margin: 0 4px;
    vertical-align: -2px;
    border-left: 1px solid #dcdcdc;
    height: 14px;
}
 .con-list .list-num .num-span{
    float: left;
    height: 16px;
    line-height: 16px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    background-color: #fff4f4;
    color: #fc6976;
}
 .con-list .list-num .num-em{
    float: left;
    height: 16px;
    line-height: 16px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    background-color: #f5f5f5;
    color: #666;
}
 .con-list .list-num .ift-diandianx{
    float: left;
    cursor: pointer;
    position: relative;
    padding: 4px 0;
    color: #dcdcdc;
    font-size: 12px;
}
 .con-list .list-num .ift-diandianx:hover .if-list {
    display: block;
}
 .con-list .list-num .ift-diandianx .if-list{
    width: 370px;
    padding: 16px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    position: absolute;
    bottom: -75px;
    left: -185px;
    background-color: #fff;
    z-index: 10;
    display: none;
}
.ift-diandianx .if-list ul li{
    float: left;
    width: 70px;
    height: 16px;
    padding: 8px 0px;
    font-size: 12px;
    color: #666;
}
.ift-diandianx .if-list ul li:hover{
    float: left;
    width: 70px;
    height: 16px;
    padding: 8px 0px;
    font-size: 12px;
    color: #fc6976;
}
.ift-diandianx .if-list .triangle{
    position: relative;
}
.ift-diandianx .if-list .triangle::after{
    content: "";
    position: absolute;
    top: -24px;
    left: 178px;
    border-bottom:8px solid #fff ;
    border-left:8px solid transparent ;
    border-right:8px solid transparent ;
}
.ift-diandianx .if-list .triangle::before{
    content: "";
    position: absolute;
    top: -25px;
    left: 178px;
    border-bottom:8px solid #dcdcdc ;
    border-left:8px solid transparent ;
    border-right:8px solid transparent ;
}

.content-left .yun{
    width: 100%;
    height: 44px;
    margin-top: 10px;
}
.content-left .yun img{
    width: 100%;
    height: 44px;
    margin-top: 10px;
}

.content-left .bd{
   width: 100%;
   padding: 12px 0px;
}
.content-left .bd .bdimg ul li{
    float: left;
    width: 155px;
    height: 106px;
    padding: 12px 15px 12px 0px;
}
.content-left .bd .bdimg ul li:nth-child(5n){
   width: 155px;
   height: 106px;
   padding: 12px 0px 12px 0px;
}
.content-left .bd .bdimg ul li .bdimgbox{
   width: 100%;
   height: 78px;
   overflow: hidden;
}
.content-left .bd .bdimg ul li img{
   width: 108%;
   transition: all 0.2s linear 0s;
}
.content-left .bd .bdimg ul li .bdimgbox:hover img{
   width: 108%;
   margin-top:-3px ;
   transition: all 0.2s linear 0s;
}
.content-left .bd .bdimg ul li p{
    width: 100%;
    height: 16px;
    font-size: 14px;
    color: #999;
    margin-top:12px ;
}
.content-left .bd .bdimg ul li:hover p{
    width: 100%;
    height: 16px;
    font-size: 14px;
    color: #fc6976;
    margin-top:12px ;
}
.content-left .bd .bdtext ul li{
    float: left;
    width: 198px;
    height: 16px;
    padding: 12px 15px 12px 0;
}
.content-left .bd .bdtext ul li:nth-child(4n){
    float: left;
    width: 198px;
    height: 16px;
    padding: 12px 0px 12px 0;
}
.content-left .bd .bdtext ul li p{
    width: 198px;
    height: 16px;
    color: #666666;
    font-size: 14px;
}
.content-left .bd .bdtext ul li:hover p{
    width: 198px;
    height: 16px;
    color: #fc6976;
    font-size: 14px;
}

// <!-- 相关推荐 -->
.content-left .suggest{
    width: 100%;
}
.content-left .suggest h2{ 
    width: 100%;
    height:80px;
    font-size: 24px;
    color: #333;
    line-height: 80px;
    font-weight: 400;
}
.content-left .suggest span{ 
    float: right;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font-size: 12px;
    line-height: 24px;
    color: #999999;
    margin-top:40px ;
    background-color: #f5f5f5;
    cursor: pointer;
}
.content-left .suggest span:hover{ 
    float: right;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font-size: 12px;
    line-height: 24px;
    color: #fc6976;
    margin-top:40px ;
    background-color: #f5f5f5;
    cursor: pointer;
}
.content-left .suggest span i{ 
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right:2px ;
}
.content-left .suggest ul li{ 
    float: left;
    width: 203px;
    height: 305px;
    padding: 0 8px 8px 0;
}
.content-left .suggest ul li:nth-child(4){ 
    float: left;
    width: 203px;
    height: 305px;
    padding: 0 0px 8px 0;
}
.content-left .suggest ul li .suggest-imgbox{ 
    width: 100%;
    height: 270px;
    overflow: hidden;
    position: relative;
}
.content-left .suggest ul li .suggest-imgbox img{ 
    width: 105%;
    transition: all 0.2s linear 0s;
}
.content-left .suggest ul li .suggest-imgbox:hover img{ 
    margin-top:-10px ;
    width: 105%;
    transition: all 0.2s linear 0s;
}
.content-left .suggest ul li .suggest-imgbox .mb{ 
   width: 100%;
   height: 18px;
   background: url(../assets/img/wave.png);
   background-size: 100%;
   position: absolute;
   bottom: -1px;
}
.content-left .suggest ul li p{ 
   width: 100%;
   height: 24px;
   font-size: 14px;
   color: #333;
   line-height: 24px;
   margin-top:10px ;
}
.content-left .suggest ul li:hover p{ 
   width: 100%;
   height: 24px;
   font-size: 14px;
   color: #fc6976;
   line-height: 24px;
   margin-top:10px ;
}
// <!-- 猜你喜欢 -->
.content-left .youlike{
    width: 100%;
}
.content-left .youlike h2{ 
    width: 100%;
    height:80px;
    font-size: 24px;
    color: #333;
    line-height: 80px;
    font-weight: 400;
}
.content-left .youlike span{ 
    float: right;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font-size: 12px;
    line-height: 24px;
    color: #999999;
    margin-top:40px ;
    background-color: #f5f5f5;
    cursor: pointer;
}
.content-left .youlike span:hover{ 
    float: right;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    font-size: 12px;
    line-height: 24px;
    color: #fc6976;
    margin-top:40px ;
    background-color: #f5f5f5;
    cursor: pointer;
}
.content-left .youlike span i{ 
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right:2px ;
}
.content-left .youlike ul li{ 
    float: left;
    width: 203px;
    height: 170px;
    padding: 0 8px 8px 0;
}
.content-left .youlike ul li:nth-child(4){ 
    float: left;
    width: 203px;
    height: 170px;
    padding: 0 0px 8px 0;
}
.content-left .youlike ul li .youlike-imgbox{ 
    width: 100%;
    height: 135px;
    overflow: hidden;
    position: relative;
}
.content-left .youlike ul li .youlike-imgbox img{ 
    width: 145%;
    margin-left:-20px ;
    transition: all 0.2s linear 0s;
}
.content-left .youlike ul li .youlike-imgbox:hover img{ 
    margin-top:-10px ;
    width: 145%;
    margin-left:-20px ;
    transition: all 0.2s linear 0s;
}
.content-left .youlike ul li .youlike-imgbox .mb{ 
   width: 100%;
   height: 18px;
   background: url(../assets/img/wave.png);
   background-size: 100%;
   position: absolute;
   bottom: -1px;
}
.content-left .youlike ul li p{ 
   width: 100%;
   height: 24px;
   font-size: 14px;
   color: #333;
   line-height: 24px;
   margin-top:10px ;
}
.content-left .youlike ul li:hover p{ 
   width: 100%;
   height: 24px;
   font-size: 14px;
   color: #fc6976;
   line-height: 24px;
   margin-top:10px ;
}

// 评论
.conment{
    width: 100%;
}
.conment h2{
    width: 100%;
    height: 80px;
    font-size: 24px;
    color: #333;
    line-height: 80px;
    font-weight: 400;
}
.conment .miconment{
    width: 100%;
    height: 40px;
    margin-bottom:10px ;
    line-height: 40px;
    border-bottom: 1px solid #fc6976 ;
}
.conment .miconment h3{
    float: left;
    width: 49px;
    height: 40px;
    margin-bottom:10px ;
    line-height: 40px;
    padding: 0 20px;
    font-size: 20px;
    border: 1px solid #fc6976;
    border-bottom: 0;
    margin-bottom: -1px;
    border-radius: 3px 3px 0 0;
    color: #fc6976;
    background-color: white;
    cursor: pointer;
}
.conment .miconment p{
    float: right;
    height: 30px;
    margin-bottom:10px ;
    line-height: 40px;
    padding-top:10px ;
    font-size: 14px;
    margin-bottom: -1px;
    color: #fc6976;
}
.conment .miconment p span{
    display: inline-block;
    font-size: 20px;
    color: #fc6976;
    font-family: Impact;
    margin-right:5px ;
}
.conment .micontext {
    width: 100%;
    position: relative;
    border: 1px solid #fc6976;
    border-radius: 3px;
    padding-bottom: 12px;
}
.conment .micontext:hover {
    width: 100%;
    position: relative;
    border: 1px solid #fc6976;
    box-shadow: 0 0 5px 0 #fc4f71;
    border-radius: 3px;
    padding-bottom: 12px;
}
.conment .micontext textarea{
    width: 100%;
    box-sizing: border-box;
    height: 55px;
    padding: 5px;
    padding-bottom:0px ;
    min-height:55px ;
    border: 0;
    outline:none;
}
.conment .micontext span{
    position: absolute;
    height: 12px;
    line-height: 12px;
    left: 0;
    bottom: 0;
    padding: 0 5px;
    font-size: 12px;
    color: #dcdcdc;
}
.conment .toone{
   width: 100%;
   height: 32px;
   padding:10px 0 ;
}
.conment .toone button{
    float: right;
    height: 32px;
    padding: 0 16px;
    border: 0;
    outline: none;
    font-size: 16px;
    background-color: #fc6976;
    color: #fff;
    border-radius: 8px 8px 8px 0;
}
.conment .toone button i{
    position: relative;
    left: -21px;
    top: 1px;
    bottom: 0;
    border-bottom: 5px solid #fc6976;
    border-left: 5px dashed transparent;
    border-right: 5px dashed transparent;
}
.conment .sh{
    width: 100%;
    height: 16px;
    padding: 40px 0px;
    font-size: 14px;
    text-align: center;
    color: #999;
}


// 右边内容
.content-right{
    float: left;
    width: 350px;
    padding: 0px 8px ;
}
.content-right .rig-top{
    width: 100%;  
}
.content-right .rig-top .introduce{
    width: 100%;
    height: 33px;
    color: #333;
    font-weight: 500;
    font-size: 24px;
   cursor: pointer;
}
.content-right .rig-top span.con{
    color: #fc6976; 
    
}
.content-right .rig-top span.split{
    display: inline-block;
    margin: -3px 16px;
    border-left: 1px solid #dcdcdc;
    height: 21px;
}
.content-right .rig-top .details{
    width: 100%;
    margin-top: 24px;
}
.content-right .rig-top .details .details-intem{
    width: 100%;
}
 .details .details-intem img{
    float: left;
    width: 150px;
}
 .details .details-intem .details-over{
    float: left;
    width: 164px;
    height: 186px;
    margin-left: 13px;
    background-color: #FFF4F4;
    padding: 14px 0 0 19px;
}
 .details .details-intem .details-over h2{
    width: 100%;
    height: 41px;
    line-height: 65px;
    font-size: 16px;
    color: #fd5158;
    margin-bottom: 8px;
    font-weight: 400;
}
 .details .details-intem .details-over div{
    width: 100%;
    height: 14px;
    font-size: 12px;
    color: #fd5158;
}
 .details .details-intem .details-over p{
    width: 100%;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 400;
}
 .details .details-intem .details-content{
    float: left;
    width: 100%;
    padding-top:13px ;
}
 .details .details-intem .details-content h2{
    width: 100%;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 400;
}
 .details .details-intem .details-content p{
    width: 100%;
    line-height: 16px;
    font-size: 14px;
    color: #999;
}
// 轮播图 
.details-chart{
    width: 100%;
}
.details-chart .chart-text{
    width: 100%;
    padding-top:13px ;
}
.details-chart .chart-text h2{
    padding: 14px;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    text-align: center;
}
.details-chart .chart-text h2:hover{
    padding: 14px;
    font-size: 16px;
    color: #fc6976;
    font-weight: 400;
}
.details-chart .chart-text p{
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #333;
    margin-top: 8px;
}
.details-chart .chart-text div{
    width: 100%;
    height: 100px;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    margin-top: 8px;
     display: -webkit-box;
     overflow: hidden;  
     -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
 .el-carousel__item img{
    width: 120%;
    margin-left: -10px;
    height: 100%;
 }

// <!-- 粉丝贡献榜 -->
.fans{
    width: 100%;
    margin: 24px 0 16px;
}
.fans h2{
    width: 100%;
    height: 33px;
    line-height: 33px;
    color: #333;
    font-size: 24px;
    font-weight: 500;
}
.fans ul {
    margin-top:16px ;
}
.fans ul li.fans-con3{
    width: 100%;
    height: 72px;
    margin-bottom:22px ;
    position: relative;
}
.fans ul li.fans-con3 .con-img{
    display: inline-block;
    width: 83px;
    height: 74px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    overflow: hidden;
    border: 1px solid #FFC100;
    vertical-align: middle;
}
.fans ul li.fans-con3 .con-img img{
    width: 100%;
}
.fans ul li.fans-con3 .con-img:hover {
    border: 1px solid #fc4f71;
}
.fans ul li.fans-con3 .con-text {
    display: inline-block;
    width: 144px;
    height: 37px;
    vertical-align: middle;
    margin-left:16px ;
}
 .con-text .text-name{
    width: 100%;
    height: 18px;
}
 .con-text .text-name span{
    font-size: 14px;
    color: #333333;
}
 .con-text .text-name .grade{
    font-size: 12px;
    margin-left: 3px;
    color: #999999;
    padding: 0 15px 0 5px;
    position: relative;
    display: inline-block;
}
 .con-text .text-name .grade span{
    font-size: 12px;
}
 .con-text .text-name .grade span i{
    position: absolute;
    font-size: 24px;
    top: -6px;
    left: 0;
}
 .con-text .text-num{
    width: 100%;
    height: 15px;
    margin-top:4px ;
}
 .con-text .text-num span{
    font-size: 12px;
    color: #666666;
    margin-right:10px ;
}
.fans ul li.fans-con3 .con-tp{
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 16px;
    top: 24px;
    background: url(../assets/img/a-jlt.png) -224px -176px no-repeat;
}
.fans ul li.fans-con3:nth-child(2) .con-tp{
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 16px;
    top: 24px;
    background: url(../assets/img/a-jlt.png) -155px -135px no-repeat;
}
.fans ul li.fans-con3:nth-child(3) .con-tp{
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 16px;
    top: 24px;
    background: url(../assets/img/a-jlt.png) 0px -224px no-repeat;
}
.fans ul li.fans-con7{
    height: 21px;
    line-height: 18px;
    padding: 17px 16px 5px 0;
}
.fans ul li.fans-con7 i{
    display: inline-block;
    text-align: center;
    font-size: 14px;
    width: 22px;
    color: #666666;
    font-style:normal;
    vertical-align: middle;
}
.fans ul li.fans-con7 .name {
    font-size: 14px;
    color: #333333;
    max-width: 185px;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fans ul li.fans-con7 .name .grade{
    font-size: 12px;
    margin-left: 5px;
    color: #999999;
    padding: 0 15px 0 5px;
    position: relative;
    display: inline-block;
}
.fans ul li.fans-con7 .name .grade span {
    font-size: 12px;
}
.fans ul li.fans-con7 .name .grade span i{
    position: absolute;
    font-size: 24px;
    top: 0px;
    left: 0;
}
.fans ul li.fans-con7 .con-num {
    float: right;
    font-size: 12px;
}


// 综合榜
.zhlist{
    width: 100%;
    margin: 24px 0 16px;
}
.zhlist .list-title{
    width: 100%;
    height: 46px;
    line-height: 46px;
}
.zhlist .list-title h2{
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    color: #333;
}
.zhlist .list-title p{
    float: right;
}
.zhlist .list-title p span{
    width: 14px;
    height: 46px;
    padding: 0px 8px ;
    font-size: 14px;
    color: #666;
}
.zhlist .list-title p span.con{
    width: 14px;
    height: 46px;
    padding: 0px 8px ;
    font-size: 14px;
    color: #fc4f71;
}

.zhlist .list-item ul li{
    width: 100%;
}
.zhlist .list-item ul li .list-text{
    width: 100%;
    position: relative;
}
.list-text i{
    display: inline-block;
    text-align: center;
    width: 22px;
    height: 24px;
    vertical-align: middle;
    line-height: 22px;
    font-style: normal;
    margin-right:  5px ;
}
.list-item ul li:nth-child(1) .list-text i{
    display: inline-block;
    text-align: center;
    width: 22px;
    height: 24px;
    vertical-align: middle;
    line-height: 22px;
    font-style: normal;
    background: url(../assets/img/a-jlt.png) -56px -224px no-repeat;
    color: transparent;
}
.list-item ul li:nth-child(2) .list-text i{
    display: inline-block;
    text-align: center;
    width: 22px;
    height: 24px;
    vertical-align: middle;
    line-height: 22px;
    font-style: normal;
    background: url(../assets/img/a-jlt.png) -84px -224px no-repeat;
    color: transparent;
}
.list-item ul li:nth-child(3) .list-text i{
    display: inline-block;
    text-align: center;
    width: 22px;
    height: 24px;
    vertical-align: middle;
    line-height: 22px;
    font-style: normal;
    background: url(../assets/img/a-jlt.png) -112px -224px no-repeat;
    color: transparent;
}
 .list-text h3{
    display: inline-block;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    vertical-align: middle;
}
 .list-text p{
    position: absolute;
    right: 0;
    top: 12px;
    padding-right: 18px;
}
.list-text p span{
    font-size: 12px;
    color: #666;
    margin-right:5px ;
    vertical-align: middle;
}
 .list-text p em{
    vertical-align: bottom;
}

.zhlist .list-item ul li .list-img{
    width: 100%;
}
.zhlist .list-item ul li .list-img .if-img{
    width: 100%;
    height: 175px;
    overflow: hidden;
    position: relative;
}
.list-img .if-img img{
    width: 110%;
    margin-top:-5px;
    margin-left:-20px;
    transition: all 0.2s linear 0s;
}
.zhlist .list-item ul li:nth-child(1) .list-img .if-img em{
    display: block;
    width: 24px;
    height: 31px;
    padding-top: 9px;
    position: absolute;
    right: 5px;
    top: 0;
    background: url(../assets/img/a-jlt.png) -224px 0px no-repeat;
    text-align: center;
    font-size: 16px;
    color: transparent;
}
.zhlist .list-item ul li:nth-child(2) .list-img .if-img em{
    display: block;
    width: 24px;
    height: 31px;
    padding-top: 9px;
    position: absolute;
    right: 5px;
    top: 0;
    background: url(../assets/img/a-jlt.png) -224px -44px no-repeat;
    text-align: center;
    font-size: 16px;
    color: transparent;
}
.zhlist .list-item ul li:nth-child(3) .list-img .if-img em{
    display: block;
    width: 24px;
    height: 31px;
    padding-top: 9px;
    position: absolute;
    right: 5px;
    top: 0;
    background: url(../assets/img/a-jlt.png) -224px -88px no-repeat;
    text-align: center;
    font-size: 16px;
    color: transparent;

}
.zhlist .list-item ul li .list-img .if-img em{
    display: block;
    width: 24px;
    height: 31px;
    padding-top: 9px;
    position: absolute;
    right: 5px;
    top: 0;
    background: url(../assets/img/a-jlt.png) -224px -132px no-repeat;
    text-align: center;
    font-size: 16px;
    color: #999;
}
.list-img .if-img img:hover{
    width: 110%;
    margin-top:-15px;
    margin-left:-20px;
    transition: all 0.2s linear 0s;
}
.list-img .if-text{
    width: 100%;
    height: 40px;
    margin-top:17px ;
    position: relative;
}
.list-img .if-text h3{
    height: 20px;
    font-size: 14px;
    color: #333;
    font-weight: 400;
}
.list-img .if-text p{
    height: 16px;
    font-size: 12px;
    color: #999;
    margin-bottom:8px ;
}
.list-img .if-text .fire{
    position: absolute;
    right: 0;
    bottom: 16px;
    height: 16px;
}
.list-img .if-text .fire span{
    font-size: 12px;
    color: #666;
    margin-right:5px ;
}
.list-img .if-text .fire i{
    vertical-align: bottom;
}
.zhlist .list-item ul li.con .list-img{
    display: block;
}
.zhlist .list-item ul li .list-img{
    display: none;
}
.zhlist .list-item ul li.con .list-text{
    display: none;
}

// 看了又看
.look{
    width: 100%;
    margin: 24px 0 16px;
}
.look h2{
    width: 100%;
    height: 80px;
    font-size: 24px;
    font-weight: 500;
    line-height: 80px;
}
.look h2 span{
    float: right;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #dcdcdc;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin-top: 27px;
    font-size: 12px;
    line-height: 26px;
    color: #999999;
    background-color: #f5f5f5;
    cursor: pointer;
}
.look h2 span:hover{
    float: right;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #dcdcdc;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    margin-top: 27px;
    font-size: 12px;
    line-height: 26px;
    color: #fc6976;
    background-color: #f5f5f5;
}
.look h2 span i{
    margin-right:2px ;
}
.look .see-img{
    width: 100%;
    margin-bottom:20px ;
}
.look .see-img .if-img{
    width: 100%;
    height: 175px;
    overflow: hidden;
}
.look .see-img .if-img img{
    width: 110%;
    margin-top: -10px;
    margin-left: -10px;
    transition: all 0.2s linear 0s;
}
.look .see-img .if-img img:hover{
    width: 110%;
    margin-top: -20px;
    margin-left: -10px;
    transition: all 0.2s linear 0s;
}
.look p {
    width: 100%;
    height: 24px;
    line-height: 24px;
    padding-top: 10px;
    font-size: 14px;
    color: #333;
}
.look p:hover {
    width: 100%;
    height: 24px;
    line-height: 24px;
    padding-top: 10px;
    font-size: 14px;
    color: #fc6976;
}

</style>